// 标签页的切换

function initSwitchTab() {
    // 获取具体相关元素 (标签页的按钮 会话列表 好友列表)
    // 选取的谁,谁的背景颜色改变
    let tabSession = document.querySelector(".tab .tab-session");
    let tabFriend = document.querySelector(".tab .tab-friend");
    // 得到的是个数组 [0] -> 会话列表 [1] -> 好友列表
    let lists = document.querySelectorAll(".list");
    tabSession.onclick = function() {
        // 设置图标
        tabSession.style.backgroundImage = "url(img/对话.png)";
        tabFriend.style.backgroundImage = "url(img/用户2.png)";
        // 显示会话 隐藏好友
        lists[0].classList = "list";
        lists[1].classList = "list hide";
    }

    tabFriend.onclick = function() {
        // 设置图标
        tabSession.style.backgroundImage = "url(img/对话2.png)";
        tabFriend.style.backgroundImage = "url(img/用户.png)";
        // 显示好友 隐藏会话
        lists[1].classList = "list";
        lists[0].classList = "list hide";
    }
}

initSwitchTab();

// 从服务器获取用户数据
function getUserinfo() {
    $.ajax({
        type: 'GET',
        url: "/userinfo",
        success: function(res) {
            // 从服务器中获取的数据
            // 检验是否有效
            if(res.userId && res.userId > 0) {
                let userDiv = document.querySelector(".main .left .user");
                userDiv.innerHTML = res.username;
                userDiv.setAttribute("user-id",res.userId);
            }else {
                // 结果无效 说明未登录
                alert("未登录");
                location.assign("/login.html");
            }
        }
    });
}

getUserinfo();

function getFriendList() {
    $.ajax({
        type: 'GET',
        url: 'friendList',
        success: function(res) {
            // 先把好友列表给清空
            let friendListUL = document.querySelector('#friend-list');
            friendListUL.innerHTML = "";
            // 遍历res 把服务器的响应结果 放回当前列表里
            for(let friend of res) {
                let li = document.createElement('li');
                li.innerHTML = '<h4>' + friend.friendName + '</h4>';
                // 此处把friendId 也记录下来
                // 吧friendId 作为html的自定义属性,加到li标签上
                li.setAttribute("friend-id",friend.friendId);
                friendListUL.appendChild(li);
            }
        },
        error: function() {
            console.log("获取失败");
        }
    });
}

getFriendList();

function getSessionList() {
    $.ajax({
        type: 'GET',
        url: 'sessionList',
        success: function(res) {
            // 清空原来的会话列表
            let sessionListUL = document.querySelector("#session-list");
            sessionListUL.innerHTML = "";
            // 遍历响应数组,针对结果遍历页面
            for(let session of res) {
                // 针对lastMessage 的长度进行截断处理
                if(session.lastMessage.length > 10) {
                    session.lastMessage = session.lastMessage.substring(0,10) + '...';
                }
                let li = document.createElement('li');
                // 吧会话id保存在li标签的自定义中
                li.setAttribute("message-session-id",session.sessionId);
                li.innerHTML = '<h3>' + session.friends[0].friendName + '</h3>' + 
                '<p>' + session.lastMessage + '</p>';
                sessionListUL.appendChild(li);

                // 给li写一个点击实践
                li.onclick = function() {
                    // 能保证点那个li 就拿到那个li
                    clickSession(li);
                }
            }
        }
    });

}
getSessionList();

function clickSession(currentLi) {
    // 设置高亮
    let allLis = document.querySelectorAll("#session-list>li");
    activeSession(allLis,currentLi);
    // 获取会话的历史消息 TODO
    let sessionId = currentLi.getAttribute("message-session-id");
    getHistoryMessage(sessionId);
}

function activeSession(allLis, currentLi) {
    for(let li of allLis) {
        if(li == currentLi) {
            li.className = 'selected';
        } else{
            li.className = '';
        }
    }
}

function getHistoryMessage(sessionId) {
    // TODO
}